<template>
	<view class="page">
		<u-navbar title="视频合成" border @leftClick="$utils.back()" placeholder />
		<video v-if="!loading" :src="list[selectItem].preview_video_url" style="width: 100%;" />
		<view class="body">
			<z-paging ref="paging" style="height: 100%;" :fixed="false" v-model="list" @query="query"
				:default-page-no="1" :default-page-size="10">
				<view class="listBox">
					<view v-for="(item,index) in list" :key="index" style="display: flex;flex-direction: column;">
						<view class="listItem" @click="selectItem=index">
							<view class="selectBox" :class='{select:index==selectItem}'>
								<u-icon name='checkmark' color='#fff' />
							</view>
							<image :src="item.thumb" mode="aspectFill" />

						</view>
						<view>
							<u--text lines='1' :text='item.title' size='24rpx' />
						</view>
					</view>
					<view class="listItem" v-if="showLast" style="background-color: #fff;box-shadow:  0 0 0 #fff;">
					</view>
				</view>
			</z-paging>
		</view>
		<view>
			<u-button color='#3975c6' shape='circle' @click='jump'>
				立即制作
			</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				videoUrl: '',
				list: [],
				loading: true,
				selectItem: 0,
				decorate_id: 0,
				prorcesses_id: 0,
				customer_id: 0
			}
		},
		onLoad(op) {
			this.decorate_id = op.decorate_id
			this.process_id = op.process_id
			this.customer_id = op.customer_id
		},
		computed: {
			showLast() {
				if (this.list.length == 0) return 0
				if (this.list.length % 3 == 0) return 0
				return 1
			}
		},
		methods: {
			query(page, size) {
				let obj = {
					page,
					size
				}
				uni.showLoading({
					title: '加载中...'
				})
				this.$api_company.Compound.Project.List(obj).then(res => {
					uni.hideLoading()
					this.$refs.paging.complete(res.data.clips.data)
					this.loading = false
				}).catch(err => {
					uni.hideLoading()
					uni.$u.toast(err.message)
				})
			},
			jump() {
				this.$utils.navigateTo({
					url: '/compound/make?id=' + this.list[this.selectItem].project_id + '&decorate_id=' + this
						.decorate_id + '&process_id=' + this.process_id + '&customer_id=' + this.customer_id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		padding: 0rpx 20rpx;
		height: 100vh;
		padding-bottom: calc(constant(safe-area-inset-bottom) + 10rpx);
		/* 兼容 iOS 设备 */
		padding-bottom: calc(env(safe-area-inset-bottom) + 10rpx);
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
	}

	.body {
		flex: 1
	}

	.listBox {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		.listItem {
			position: relative;
			margin-top: 20rpx;
			height: 280rpx;
			width: 210rpx;
			border-radius: 8rpx;
			overflow: hidden;
			background-color: #bbb;
			box-shadow: 0 0 10rpx #ddd;

			>image {
				width: 100%;
				height: 100%;
			}

			.selectBox {
				background-color: #fff;
				z-index: 1;
				top: 10rpx;
				right: 10rpx;
				border-radius: 100%;
				width: 30rpx;
				height: 30rpx;
				position: absolute;
				border: 1rpx solid #999;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.select {
				background-color: green;

			}
		}

	}
</style>